<template>
  <view :style="colorStyle">
    <view class="applyModule">
      <image
        :src="configInfo.distribution"
        class="img"
        mode="aspectFill"
      ></image>
      <!-- <view
        class="ruleModule cfff f24"
        @click="gourl('/pages/distributor/list')"
      >
        申请记录
      </view> -->
    </view>
    <view class="text flex column center">
      <view class="bold f30 fontWeight">申请条件</view>
      <view class="c999 f24">购买以下产品即可成为分销</view>
    </view>
    <view class="goodsModule">
      <view
        class="goodslist flex"
        v-for="(item, index) in goodsList"
        :key="item.id"
        @click.stop="gourl(`/pages/goods/detail?id=${item.id}`)"
      >
        <view class="goodsimgBox">
          <image :src="item.img" class="goodsimg" mode="aspectFill"></image>
        </view>
        <view class="goodsinfo flex column">
          <view class="block1">
            <text class="goodsname ellipsis2 c1F1F1F f28">
              {{ item.name }}
            </text>
          </view>
          <view class="block2 flex fontWeight">
            <view class="unit f24"> ￥ </view>
            <view class="price f40">
              {{ item.goodsPrice }}
            </view>
          </view>
          <view class="block3 flex between">
            <view></view>
            <view class="btn1 cfff f24">去购买</view>
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="goodsList.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { config as configAPI } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      goodsList: [],
      configInfo: {},
    };
  },
  onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.handleConfigGoods();
      this.config();
    }
  },
  methods: {
    async config() {
      let { data } = await configAPI({
        key: "imgs",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        this.configInfo = info;
      }
    },
    async handleConfigGoods() {
      loading();
      let { data } = await configAPI({
        key: "place.goods",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        console.log(info);
        if (info.applyType == 1) {
          uni.redirectTo({
            url: `/pages/distributor/applay`,
          });
        }
        this.goodsList = info.list;
      }
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}
.applyModule {
  position: relative;

  .img {
    width: 100%;
    height: 422rpx;
  }

  .ruleModule {
    position: fixed;
    width: 171rpx;
    height: 56rpx;
    border-radius: 28rpx 0 0 28rpx;
    right: 0;
    top: 66rpx;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    line-height: 56rpx;
    text-align: center;
  }
}
.text {
  text-align: center;
  padding: 30rpx 0 0;
  .bold {
    margin: 0 0 10rpx 0;
  }
}
.goodsModule {
  margin: 30rpx 30rpx 0;

  .goodslist {
    background: #fff;
    border-radius: 24rpx;
    padding: 16rpx;
    margin: 0 0 24rpx 0;

    .goodsimgBox {
      position: relative;
      .goodsimg {
        width: 230rpx;
        height: 230rpx;
        border-radius: 24rpx;
      }
      .no-stock {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          height: 230rpx;
          // height: 230rpx;
          object-fit: cover;
        }
      }
    }

    .goodsinfo {
      width: calc(100% - 230rpx - 16rpx);
      margin-left: 16rpx;
      height: 260rpx;

      .block1 {
        width: 100%;

        .goodsname {
        }

        .goodslabel {
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            padding: 4rpx 18rpx;
            border: 1px solid var(--view-theme);
            border-radius: 8rpx;
            margin: 0 20rpx 0 0;
          }
        }
      }

      .block2 {
        color: var(--view-theme);
        margin-top: 30rpx;

        .unit {
          position: relative;
          top: 16rpx;
        }

        .price {
        }
      }

      .block3 {
        margin: 50rpx 0 0;
        .btn1 {
          background: var(--view-theme);
          border-radius: 28rpx;
          padding: 8rpx 20rpx;
        }
      }
    }
  }
}
</style>
